<template>
  <div class="consulting-index positRel">
    <div class="main">
      <MenuLocation :title="'在线咨询'"></MenuLocation>
      <div class="doctor-content">
        <div class="screening">
          <div
            v-for="(item, index) in screening"
            :key="item.id"
            :style="index > 0 ? 'margin-left:calc(30 / 1920 * 100vw)' : ''"
            @click="screeningHandle(index)"
          >
            <span
              :style="current == index ? 'color:#F4333C' : 'color:#63676E'"
              >{{ item.name }}</span
            >
            <img
              class="select"
              :src="
                current == index
                  ? require('@/assets/online_consulting/selected.png')
                  : require('@/assets/online_consulting/select.png')
              "
              alt=""
            />
          </div>
        </div>
        <div class="doctor-list">
          <div
            class="doctor-card"
            v-for="(item, index) in expertList"
            :key="index"
            :style="index == 0 ? 'margin-top:calc(32 / 1920 * 100vw)' : ''"
          >
            <div
              class="head-face"
              :style="`background-image:url(${item.face})`"
            ></div>
            <div class="doctor-information">
              <div class="name">
                <span>{{ item.realName }}</span>
                <div class="score">
                  <img
                    src="@/assets/online_consulting/score.png"
                    alt=""
                    class="score-face"
                  />
                  <span>{{ item.scoreAvg }}</span>
                </div>
              </div>
              <div class="describe">
                擅长领域:
                {{ item.domain }}
              </div>
            </div>
            <div class="price">
              <span>¥ {{ item.consultPrice }}</span>
              <div class="ask" @click="askDoctor(item)">问专家</div>
            </div>
          </div>
        </div>
        <div class="page">
          <Page :total="total" @on-change="currentHandle" :page-size="5" />
        </div>
      </div>
    </div>
    <Footer :top="20"></Footer>
  </div>
</template>
<script>
import Footer from "@/components/footer/my_footer.vue";
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import { getExpertList } from "../../api/otwoo.js";
export default {
  data() {
    return {
      current: 0,
      screening: [
        { name: "综合排序", id: "comprehensive" },
        { name: "好评", id: "score" },
        { name: "热度", id: "hot" },
        { name: "销量", id: "sell" },
      ],
      params: {
        consultOpen: 1,
        keyword: "",
        mobile: "",
        page: 1,
        qualification: 0,
        registerOpen: 0,
        rows: 5,
        sortField: "",
        sortType: "",
      },
      expertList: [],
      total: 0,
    };
  },
  components: {
    Footer,
    MenuLocation,
  },
  mounted() {
    this.getExpertList();
  },
  methods: {
    //改变筛选栏状态
    screeningHandle(index) {
      this.current = index;
      if (this.screening[index].id === "comprehensive") {
        this.params.sortField = "";
        this.params.sortType = "";
      } else if (this.screening[index].id === "score") {
        this.params.sortField = "1";
        this.params.sortType = "desc";
      } else if (this.screening[index].id === "hot") {
        this.params.sortField = "2";
        this.params.sortType = "desc";
      } else {
        this.params.sortField = "3";
        this.params.sortType = "desc";
      }
      this.getExpertList();
    },
    //点击问医生
    askDoctor(item) {
      localStorage.setItem("consultPrice", item.consultPrice);
      this.$router.push({
        path: "/start",
        query: {
          siteName: item.siteName,
          expertName: item.realName,
          expertId: item.id,
        },
      });
    },
    //获取当前页码
    currentHandle(current) {
      this.params.page = current;
      this.getExpertList();
    },
    //获取专家列表
    getExpertList() {
      getExpertList(this.params).then((res) => {
        this.total = res.result.total;
        this.expertList = res.result.list.map((item) => {
          if (item.scoreAvg != null) {
            item.scoreAvg = item.scoreAvg.toFixed(1);
          } else {
            item.scoreAvg = "0.0";
          }
          if (item.registerPrice != null) {
            item.registerPrice = item.registerPrice.toFixed(2);
          } else {
            item.registerPrice = "0.00";
          }
          return item;
        });
      });
    },
    //排序工具
    // compare(property) {
    //   return function (a, b) {
    //     var value1 = a[property];
    //     var value2 = b[property];
    //     return value1 - value2;
    //   };
    // },
  },
};
</script>
<style lang="scss" scoped>
.consulting-index {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  padding-bottom: 50px;
  .main {
    padding: 0px calc(360 / 1920 * 100vw);
    .menu-location {
      height: calc(54 / 1920 * 100vw);
      display: flex;
      align-items: center;
      > img {
        width: calc(11 / 1920 * 100vw);
        height: calc(14 / 1920 * 100vw);
        margin-top: calc(-2 / 1920 * 100vw);
      }
      > span {
        margin-left: calc(11 / 1920 * 100vw);
      }
    }
    .doctor-content {
      position: relative;
      display: flex;
      flex-direction: column;
      background: #fff;
      padding: calc(25 / 1920 * 100vw) calc(24 / 1920 * 100vw);
      border-radius: calc(5 / 1920 * 100vw);
      height: calc(936 / 1920 * 100vw);
      .screening {
        margin-left: auto;
        display: flex;
        cursor: pointer;
        > span {
          font-size: calc(14 / 1920 * 100vw);
        }
        .select {
          width: calc(7 / 1920 * 100vw) !important;
          height: calc(11 / 1920 * 100vw) !important;
          margin-left: calc(4 / 1920 * 100vw);
        }
      }
      .doctor-list {
        .doctor-card {
          display: flex;
          //   align-items: center;
          margin-top: calc(17 / 1920 * 100vw);
          background: #f8f8f8;
          border-radius: calc(5 / 1920 * 100vw);
          padding: calc(19 / 1920 * 100vw) calc(43 / 1920 * 100vw)
            calc(19 / 1920 * 100vw) calc(19 / 1920 * 100vw);
          .head-face {
            width: calc(86 / 1920 * 100vw);
            height: calc(86 / 1920 * 100vw);
            border-radius: calc(4 / 1920 * 100vw);
            background-size: cover;
          }
          .doctor-information {
            width: calc(700 / 1920 * 100vw);
            margin-left: calc(20 / 1920 * 100vw);
            .name {
              display: flex;
              align-items: center;
              > span {
                font-size: calc(18 / 1920 * 100vw);
                color: #333333;
              }
              .score {
                margin-left: calc(8 / 1920 * 100vw);
                .score-face {
                  width: calc(12 / 1920 * 100vw);
                  height: calc(13 / 1920 * 100vw);
                }
                > span {
                  font-size: calc(14 / 1920 * 100vw);
                  margin-left: calc(4 / 1920 * 100vw);
                }
              }
            }
            .describe {
              color: #9a9a9a;
              font-size: calc(14 / 1920 * 100vw);
              text-overflow: -o-ellipsis-lastline !important;
              overflow: hidden !important; //溢出内容隐藏
              text-overflow: ellipsis !important; //文本溢出部分用省略号表示
              display: -webkit-box !important; //特别显示模式
              -webkit-line-clamp: 2 !important; //行数
              line-clamp: 2 !important;
              -webkit-box-orient: vertical !important; //盒子中内容竖直排列
            }
          }
          .price {
            display: flex;
            align-items: center;
            margin-left: auto;
            > span {
              font-size: calc(18 / 1920 * 100vw);
              color: #fd5151;
            }
            .ask {
              width: calc(80 / 1920 * 100vw);
              height: calc(34 / 1920 * 100vw);
              background: #fd5151;
              color: #fff;
              font-size: calc(14 / 1920 * 100vw);
              border-radius: calc(5 / 1920 * 100vw);
              text-align: center;
              line-height: calc(34 / 1920 * 100vw);
              margin-left: calc(35 / 1920 * 100vw);
              cursor: pointer;
            }
          }
        }
      }
      .page {
        position: absolute;
        right: calc(40 / 1920 * 100vw);
        bottom: calc(24 / 1920 * 100vw);
      }
    }
  }
}
</style>
